<template>
	<view class="Cbottomview">
		<view ref="Cbottomview_content" class="Cbottomview_content u-border-top">
			<slot />
			<u-safe-bottom />
		</view>
		<view :style="{ height: `${bottomViewHegiht}px`}" />
	</view>
</template>

<script>
	export default {
		name:"Cbottomview",
		data() {
			return {
				bottomViewHegiht: 0, //  底部可视化填充高度（适配全面屏）
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.setPlaceholderHeight()
			})
		},
		methods: {
			// 获取底部按钮可视化高度（适配全面屏）
			async setPlaceholderHeight() {
				// 延时一定时间
				await uni.$u.sleep(20);
				// #ifndef APP-NVUE
				this.$uGetRect(".Cbottomview_content").then(({ height }) => {
				  // 修复IOS safearea bottom 未填充高度
				  this.bottomViewHegiht = height;
				});
				// #endif
			
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs["Cbottomview_content"], (res) => {
				  const { size } = res;
				  this.bottomViewHegiht = size.height;
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
.Cbottomview{
	&_content{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background-color: #FFFFFF;
	}
}
</style>
